<script setup>
import { GetTreeAPI } from '@/api/system/shopAdministration/modeling'
const emit = defineEmits()
const props = defineProps({
  modelValue: {
    type: String || Number,
    defulat: ''
  },
  disabled: {
    type: Boolean,
    defulat: false
  },
  nodeKey: {
    type: String || Number,
    defulat: 'code'
  },
  strictly: {
    type: Boolean,
    defulat: true
  }
})

// 车间选择数据
const treeData = ref([])
// 车间选择配置
const prop = ref({
  value: 'code',
  label: 'name'
})

const data = ref()
// 获取树结构
const getTree = async () => {
  try {
    const res = await GetTreeAPI()
    treeData.value = res.theDrop
  } catch {
  } finally {
  }
}
getTree()

watch(
  () => props.modelValue,
  val => {
    if (val) data.value = val
  },
  { deep: true, immediate: true }
)

watchEffect(() => {
  emit('update:modelValue', data.value)
})

const change = val => {
  emit('change', val)
}
</script>

<template>
  <el-tree-select
    @change="change"
    :disabled="props.disabled"
    v-model="data"
    :data="treeData"
    :node-key="props.nodeKey"
    :props="prop"
    :render-after-expand="false"
    :check-strictly="!props.strictly"
  />
</template>
